<template>
  <div class="nofind">
    <el-table v-if="userList.length !== 0" class="partition" border :data="userList" style="width: 100%">
      <el-table-column align="center" type="index" width="50" label="序号">
      </el-table-column>
      <el-table-column align="center" prop="name" label="姓名">
      </el-table-column>
      <el-table-column align="center" prop="password" label="密码">
        <template>
          ******
        </template>
      </el-table-column>
      <el-table-column align="center" prop="phone" label="电话">
      </el-table-column>
      <el-table-column align="center" prop="QQ" label="QQ"> </el-table-column>

      <el-table-column align="center" prop="money" label="余额">
      </el-table-column>
      <el-table-column align="center" prop="date" label="添加时间">
      </el-table-column>
      <el-table-column align="center" prop="audits" label="审核">
        <template slot-scope="scope">
          <span class="binding" v-if="scope.row.audits === 'true'">是</span>
          <span class="binding" v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="grade" label="权限" v-if="user.username === 'admin'">
        <template slot-scope="scope">
          <span class="binding" v-if="scope.row.grade >= 999">管理员</span>
          <span class="binding" v-else>普通用户</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="200" v-if="user.username === 'admin'">
        <template slot-scope="scope">
          <el-button v-if="scope.row.grade >= 999" @click="slectGrade(false, scope.row._id)" type="text" size="small">取消管理</el-button>
          <el-button v-else type="text" size="small" @click="slectGrade(true, scope.row._id)">设置管理</el-button>
          <el-button type="error" size="small" @click="deleteUser(scope.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-else>无权限访问</div>
  </div>
</template>
<script>
import { allusers, updateGrade, deleteUser } from "../../api/user";
export default {
  name: "userList",
  data () {
    return {
      userList: [],
    };
  },
  computed: {
    user () {
      return this.$store.getters.user;
    },
  },
  methods: {
    getuserall () {
      allusers().then((res) => {
        if (res.success === true) {
          this.userList = res.result;
        } else {
          this.userList = [];
        }
      });
    },
    slectGrade (grade, _id) {
      updateGrade({
        grade,
        _id,
      }).then((res) => {
        if (res.success) {
          this.getuserall();
        }
      });
    },
    deleteUser (_id) {
      deleteUser(_id).then((res) => {
        if (res.success) {
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.getuserall();
        }
      });
    }
  },
  mounted () {
    this.getuserall();
  },
};


</script>
<style scoped>
.nofind {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.nofind img {
  width: 100%;
  height: 100%;
}
</style>
